import { getArticleAction, refArticleAction } from '@/store/action/home'
import { RootState } from '@/types/store'
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import ArticleItem from '../ArticleItem'
import { InfiniteScroll, PullToRefresh } from 'antd-mobile'
import styles from './index.module.scss'
type PropType = { id: number }
const ArticleList = (props: PropType) => {
  const dispatch = useDispatch()
  const articlesChannel = useSelector(
    (state: RootState) => state.channelReducer.articlesChannel
  )
  // 上拉加载
  const [hasMore, setHasMore] = useState(true)
  async function loadMore() {
    await dispatch(
      getArticleAction(
        props.id,
        +(articlesChannel[props.id]?.pre_timestamp || Date.now())
      )
    )
  }
  // 下拉刷新
  async function refrech() {
    await dispatch(refArticleAction(props.id))
  }
  useEffect(() => {
    // dispatch(getArticleAction(props.id))
  }, [])
  return (
    <div className={styles.root}>
      {/* 文章列表中的每一项 */}
      <PullToRefresh onRefresh={refrech}>
        <div className="article-item">
          {articlesChannel[props.id]?.articles?.map((v) => {
            return <ArticleItem key={v.art_id} item={v} />
          })}
        </div>
      </PullToRefresh>
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </div>
  )
}

export default ArticleList
